<template>
  <el-form
      ref="formRef"
      :model="formData"
      :rules="formRules"
      v-loading="formLoading"
      label-width="0px"
      :inline-message="true"
  >
    <el-table :data="formData" border  class="-mt-10px">
      <el-table-column label="序号" type="index" width="80" />
      <!-- 根据 showExtraColumns prop 决定是否显示额外的列 -->
      <el-table-column v-if="showExtraColumns" label="序列号" min-width="150">
        <template #default="{ row, $index }">
          <el-form-item :prop="`${$index}.serialNumber`" :rules="formRules.serialNumber" class="mb-0px!">
            {{row.serialNo}}
          </el-form-item>
        </template>
      </el-table-column>
      <el-table-column v-if="showExtraColumns" label="消耗状态" min-width="150">
        <template #default="{ row, $index }">
          <el-form-item :prop="`${$index}.consumptionStatus`" :rules="formRules.consumptionStatus" class="mb-0px!">
            {{row.consumeStatus}}
          </el-form-item>
        </template>
      </el-table-column>
      <el-table-column label="材料品号" min-width="150">
        <template #default="{ row, $index }">
          <el-form-item :prop="`${$index}.itemCode`" :rules="formRules.itemCode" class="mb-0px!">
            {{row.itemCode}}
          </el-form-item>
        </template>
      </el-table-column>
      <el-table-column label="材料品名" min-width="150">
        <template #default="{ row, $index }">
          <el-form-item :prop="`${$index}.itemName`" :rules="formRules.itemName" class="mb-0px!">
            {{row.itemName}}
          </el-form-item>
        </template>
      </el-table-column>
      <el-table-column label="材料规格" min-width="350">
        <template #default="{ row, $index }">
          <el-form-item :prop="`${$index}.itemSpecification`" :rules="formRules.itemSpecification" class="mb-0px!">
            {{row.itemSpecification}}
          </el-form-item>
        </template>
      </el-table-column>
      <el-table-column label="需领用量" min-width="150">
        <template #default="{ row, $index }">
          <el-form-item :prop="`${$index}.requiredQty`" :rules="formRules.requiredQty" class="mb-0px!">
            {{row.requiredQty}}
          </el-form-item>
        </template>
      </el-table-column>
      <el-table-column label="材料描述" min-width="350">
        <template #default="{ row, $index }">
          <el-form-item :prop="`${$index}.itemDesc`" :rules="formRules.itemDesc" class="mb-0px!">
            {{row.itemDesc}}
          </el-form-item>
        </template>
      </el-table-column>
    </el-table>
  </el-form>
</template>

<script setup lang="ts">
import { WorkOrderCpsApi } from '@/api/opticore/workorder'
import { ref, reactive, watch, defineProps, defineExpose } from 'vue'

const props = defineProps<{
  docNo: undefined // 工单号（主表的关联字段）
  showExtraColumns: boolean // 控制是否显示额外的列
}>()

const formLoading = ref(false) // 表单的加载中
const formData = ref([])
const formRules = reactive({
  // 可以根据需要添加序列号和消耗状态的验证规则
  serialNumber: [],
  consumptionStatus: []
})
const formRef = ref() // 表单 Ref

/** 监听主表的关联字段的变化，加载对应的子表数据 */
watch(
    () => props.docNo,
    async (val) => {
      // 1. 重置表单
      formData.value = []
      // 2. val 非空，则加载数据
      if (!val) {
        return;
      }
      try {
        formLoading.value = true
        // formData.value = await WorkOrderCpsApi.getWorkOrderBomPlcListByDocNo(val)
        if (props.showExtraColumns) {
          // 物料明细页面调用另一个接口
          formData.value = await WorkOrderCpsApi.getCollectedMaterialsListByDocNo(val)
        } else {
          formData.value = await WorkOrderCpsApi.getWorkOrderBomPlcListByDocNo(val)
        }
      } finally {
        formLoading.value = false
      }
    },
    { immediate: true }
)

/** 新增按钮操作 */
const handleAdd = () => {
  const row = {
    itemCode: undefined,
    itemName: undefined,
    itemSpecification: undefined,
    itemDesc: undefined,
    requiredQty: undefined,
    // 如果显示额外列，初始化序列号和消耗状态
    ...(props.showExtraColumns && { serialNumber: undefined, consumptionStatus: undefined })
  }
  row.docNo = props.docNo
  formData.value.push(row)
}

/** 删除按钮操作 */
const handleDelete = (index) => {
  formData.value.splice(index, 1)
}

/** 表单校验 */
const validate = () => {
  return formRef.value.validate()
}

/** 表单值 */
const getData = () => {
  return formData.value
}

defineExpose({ validate, getData })
</script>
